<template>
  <!--      很多标签start-->
  <div style="box-shadow: 0px 4px 6px rgba(0,0,0,.175)!important;" id="upp">
    <h4 class="biaoqianfenlei">标签分类</h4>
    <div class="manybq" style="padding-bottom: 30px;">
      <div style="width: 80%;margin: 0 auto;text-align: center;" id="one" v-if="labl[0]">
        <button type="button" class="btn btn-primary xiez" v-if="labl[0][0]">{{labl[0][0]}}</button>
        <button type="button" class="btn btn-secondary small" v-if="labl[0][1]">{{labl[0][1]}}</button>
        <button type="button" class="btn btn-success xief small" v-if="labl[0][2]">{{labl[0][2]}}</button>
        <button type="button" class="btn btn-danger small" v-if="labl[0][3]">{{labl[0][3]}}</button>
        <button type="button" class="btn-lg btn-warning" v-if="labl[0][4]">{{labl[0][4]}}</button>
        <button type="button" class="btn btn-info small" v-if="labl[0][5]">{{labl[0][5]}}</button>
        <button type="button" class="btn btn-light" v-if="labl[0][6]">{{labl[0][6]}}</button>
        <button type="button" class="btn btn-dark xiez" v-if="labl[0][7]">{{labl[0][7]}}</button>
        <button type="button" class="btn btn-link" v-if="labl[0][8]">{{labl[0][8]}}</button>
      </div>
      <div style="width: 70%;margin: 0 auto;" id="two" v-if="labl[0] && labl[0][9]">
        <button type="button" class="btn btn-outline-success small" v-if="labl[0][9]">{{labl[0][9]}}</button>
        <button type="button" class="btn btn-info xiez" v-if="labl[0][10]">{{labl[0][10]}}</button>
        <button type="button" class="btn btn-outline-success xief" v-if="labl[0][11]">{{labl[0][11]}}</button>
        <button type="button" class="btn btn-danger small" v-if="labl[0][12]">{{labl[0][12]}}</button>
        <button type="button" class="btn btn-warning" v-if="labl[0][13]">{{labl[0][13]}}</button>
        <button type="button" class="btn btn-outline-info small xief" v-if="labl[0][14]">{{labl[0][14]}}</button>
        <button type="button" class="btn btn-info xiez" v-if="labl[0][15]">{{labl[0][15]}}</button>
        <button type="button" class="btn btn-outline-dark small xief" v-if="labl[0][16]">{{labl[0][16]}}</button>
      </div>
      <div style="width: 65%;margin: 0 auto;" id="three" v-if="labl[0] && labl[0][17]">
        <button type="button" class="btn btn-success small" v-if="labl[0][17]">{{labl[0][17]}}</button>
        <button type="button" class="btn btn-danger small xiez" v-if="labl[0][18]">{{labl[0][18]}}</button>
        <button type="button" class="btn btn-outline-success small" v-if="labl[0][19]">{{labl[0][19]}}</button>
        <button type="button" class="btn btn-outline-danger xief" v-if="labl[0][20]">{{labl[0][20]}}</button>
        <button type="button" class="btn btn-warning xiez" v-if="labl[0][21]">{{labl[0][21]}}</button>
        <button type="button" class="btn btn-outline-info small" v-if="labl[0][22]">{{labl[0][22]}}</button>
        <button type="button" class="btn btn-info xief" v-if="labl[0][23]">{{labl[0][23]}}</button>
      </div>
      <div style="width: 55%;margin: 0 auto;" id="four" v-if="labl[0] && labl[0][24]">
        <button type="button" class="btn btn-outline-success small" v-if="labl[0][24]">{{labl[0][24]}}</button>
        <button type="button" class="btn btn-secondary" v-if="labl[0][25]">{{labl[0][25]}}</button>
        <button type="button" class="btn btn-outline-success small xief" v-if="labl[0][26]">{{labl[0][26]}}</button>
        <button type="button" class="btn btn-danger" v-if="labl[0][27]">{{labl[0][27]}}</button>
        <button type="button" class="btn btn-outline-warning xiez" v-if="labl[0][28]">{{labl[0][28]}}</button>
      </div>
    </div>
  </div>
  <!--      很多标签end-->
</template>

<script>
  export default {
    name: 'up',
    data() {
      return {
        info: [
          {
            articleLable: null
          }
        ],
        lables: [],
        lable: [],
        labl: [],
        useridd:null
      }
    },
    methods: {
      getdata: function () {
        let that = this;
        this.axios.get('http://localhost:9000/cyj/findArchiveLableByUserId/'+this.useridd).then(function (response) {
          that.info = response.data.data;
          for (let i = 0; i < that.info.length; i++) {
            if (that.info[i] != null) {
              that.lables.push(that.info[i].articleLable.split(','));
              for (let t = 0; t < that.lables[i].length; t++) {
                that.lable.push(that.lables[i][t]);
              }
            }
          }
          that.labl.push(Array.from(new Set(that.lable)))
          // console.log(that.labl[0])
        })
      }
    },
    created() {
      this.useridd = window.sessionStorage.getItem('userId')
      this.getdata()
    }
  }
</script>

<style scoped>
  @import '../../../static/css/cyj.css';
</style>
